<template>
  <div class="siteList">
    <el-form :inline="true" label-position="left" :model="searchForm" size="small">
      <el-form-item>
        <el-button type="primary" @click="handlerAdd" v-has="['site:add']" size="mini" icon="el-icon-plus">新增</el-button>
      </el-form-item>
      <el-form-item label="站点名称">
        <el-input v-model="searchForm.sitesName" clearable placeholder="请输入站点名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="contant">
      <el-table :data="tableData" style="width: 100%; margin-top: 10px" @selection-change="handleSelectionChange" fit :max-height="maxHeight" border stripe size="mini" highlight-current-row
        :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
        <!-- <el-table-column type="selection" width="40" /> -->
        <el-table-column prop="sitesName" label="站点名称" align="center"/>
        <el-table-column prop="sitesType" label="站点类型" align="center"/>
        <el-table-column prop="allLineCount" label="离线设备数/设备总数" align="center">
          <template slot-scope="{ row }">
            {{ row.offLineCount }}/ {{ row.allLineCount }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="站点创建时间" align="center"/>
        <el-table-column prop="sitesRemarks" label="描述" align="center"/>
        <!-- <el-table-column label="操作" min-width="100" align="center"> -->
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" size="mini" @click="toDetail(row)" icon="el-icon-view">详情</el-button>
            <el-button type="text" size="mini" @click="handleEdit(row)" icon="el-icon-edit" v-has="['site:update']">编辑</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" v-has="['site:delete']" @click="onCanle(row)" style="color:#F56C6C">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right">
        <pagination v-show="pagination.total > 0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
      </div>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/link/file";
import { siteList, deleteId } from "@/api/site/site";
export default {
  comments: {},
  props: {},
  data() {
    return {
      searchForm: {},
      type: "",
      typeOptions: [
        {
          value: "1",
          label: "固件",
        },
      ],
      dialogVisible: false,
      multipleSelection: [],
      tableData: [],
      addForm: {},
      pagination: {
        total: 0,
        page: 1,
        pageSize: 10,
      },
      rules: {
        name: [{ required: true, message: "请输入站点名称", trigger: "blur" }],
        version: [
          { required: true, message: "请输入站点类型", trigger: "blur" },
        ],
        type: [
          {
            required: true,
            message: "请输入故障设备数/设备总数",
            trigger: "blur",
          },
        ],
        tenantId: [
          { required: true, message: "必须选择租户", trigger: "change" },
        ],
      },
      curTitle: "新增",
    };
  },
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      return curHeight - 280;
    },
  },
  created() { },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      let obj = {
        page: this.pagination.page,
        pageSize: this.pagination.pageSize,
        sitesName: this.searchForm.sitesName
      };
      siteList(obj).then((res) => {
        
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.pagination.total = res.data.pagination.total;
        }
      });
    },
    //关闭
    close() {
      this.dialogVisible = false;
      this.$refs.addForm.resetFields();
    },
    //新增
    handlerAdd() {
      this.$router.push({ path: "/addSite" });
    },
    //详情
    toDetail(row) {
      this.$router.push({ path: "/siteDetail", query: { id: row.id } });
    },
    // 复选框事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getPageList() {
      this.searchList();
    },
    search() {
      this.pagination.page = 1;
      this.searchList();
    },
    searchList() {
      const p = Object.assign(this.pagination, this.searchForm);
      this.getList();
    },
    handleEdit(row) {
      this.$router.push({ path: "/updateSite", query: { id: row.id } });
    },
    onCanle(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteId(row.id).then((resp) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            if ((this.pagination.total - 1) % this.pagination.pageSize == 0) {
              if (this.pagination.page > 1) {
                this.pagination.page = this.pagination.page - 1;
              }
            }
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped lang="scss">
.siteList {
  padding: 20px;

  .curHeader {
    position: relative;
    height: 40px;
    .searcherBox {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>
